<template>
  <div class="box">
    <div class="box_conter">
      <div class="box_left">
        <div class="logo_top">雪月</div>
        <ul class="logo_btn">
          <li>后台管理系统</li>
          <li>BACKROUND MANACEMENT CENTER</li>
        </ul>
      </div>
      <div class="box_right">
        <div class="logon">
          <span>SIGN IN</span>
          <a href="#">Logon</a>
        </div>
        <el-form
          style="width: 300px; margin: 0 auto"
          :model="userInfo"
          :rules="rules"
          ref="loginForm"
        >
          <el-form-item  prop='username'>
            <el-input
              type="text"
              placeholder="请输入用户名"
              v-model="userInfo.username"
            >
              <i slot="prefix" class="iconfont icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop='password'>
            <el-input
              type="password"
              placeholder="请输入密码"
              v-model="userInfo.password"
            >
              <i slot="prefix" class="iconfont icon-lock_fill"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              round
              style="width: 300px"
              @click="gologin()"
              >登录</el-button
            >
          </el-form-item>
          <template>
            <el-checkbox v-model="userInfo.isAuto">保持登录状态</el-checkbox>
          </template>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {api_login} from "../../api/user.js";
export default {
  data() {
    //校验账户
    const checkUserName = (rule, value, callback) => {
        console.log(value);
      let reg = /^[a-z0-9]{3,12}$/ig;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的用户名"));
      }
    };
    //校验密码
    const checkPassword = (rule, value, callback) => {
      let reg = /^[a-z0-9]{3,12}$/gi;
      if (reg.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的密码"));
      }
    };
    return {
      userInfo: {
        username: "",
        password: "",
        isAuto: false,
      },
      //校验对象
      rules: {
        username: [{ validator: checkUserName, trigger: "blur" }],
        password: [{ validator: checkPassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    gologin() {
      this.$refs.loginForm.validate(async (b) => {
        if (b) {
            this.login(this.userInfo);
        }
      });
    },

    async login(user){
        let rst =await api_login(user);
            let {data,meta}=rst;
            let {msg,status}=meta;
            if(status==200){
                if(this.userInfo.isAuto){
                    this.$local.set("userInfo",this.userInfo);

                }
                this.$local.set("user_login",data)
                this.$router.replace("/home")
            }else{
                this.$message.error(msg)
            }
     
    }
    
  },
  // 在实例被创建之后触发
  created(){
    if(this.$local.isKey("userInfo")){
        let userInfo=this.$local.get("userInfo");
        this.login(userInfo);
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /deep/.box_conter {
    width: 800px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.3);
    display: flex;
    border-radius: 10px;
    .box_left {
      flex: 0 0 450px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      box-sizing: border-box;
      .logo_top {
        font-size: 28px;
        color: #409eff;
      }
      .logo_btn {
        li:nth-child(1) {
          color: snow;
        }
        li:nth-child(2) {
          font-size: 15px;
          color: gray;
          margin-top: 10px;
        }
      }
    }
    .box_right {
      flex: 1;
      background-color: #fff;
      border-radius: 0 10px 10px 0;
      .logon {
        padding: 20px 20px 20px 200px;
        span {
          font-size: 14px;
          font-style: italic;
          color: gray;
        }
        a {
          margin-left: 10px;
          font-size: 20px;
          color: #409eff;
        }
      }
    }
    .iconfont {
      font-size: 25px;
    }
    .a {
      border-radius: 50%;
    }
  }
}
</style>